<template>
  <div v-if="isVisible" class="modal-overlay">
    <div class="modal-content">
      <h3>评价订单</h3>
      <p>订单ID: {{ orderId }}</p>
      <p>会议室ID: {{ roomId }}</p>
      <div class="form-group">
        <label for="commentContent">您的评价:</label>
        <textarea id="commentContent" v-model="commentContent" rows="5" placeholder="请输入您的评价..."></textarea>
      </div>
      <div class="form-group rating-group">
        <label>您的评分:</label>
        <el-rate v-model="rating" :max="5" show-text :texts="['非常差', '差', '一般', '好', '非常好']" />
      </div>
      <div class="modal-actions">
        <button @click="submitComment" class="submit-button">提交评价</button>
        <button @click="cancelComment" class="cancel-button">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false
  },
  orderId: {
    type: Number,
    required: true
  },
  roomId: {
    type: Number,
    required: true
  }
});

const emit = defineEmits(['submit', 'cancel']);

const commentContent = ref('');
const rating = ref(null); // 将默认值设置为 null

// Reset comment content and rating when modal becomes visible
watch(() => props.isVisible, (newVal) => {
  if (newVal) {
    commentContent.value = '';
    rating.value = null; // 重置评分时也设置为 null
  }
});

const submitComment = () => {
  if (commentContent.value.trim() && rating.value >= 1 && rating.value <= 5) {
    emit('submit', {
      orderId: props.orderId,
      roomId: props.roomId,
      content: commentContent.value.trim(),
      rating: rating.value // 添加评分
    });
  } else {
    alert('评价内容和评分不能为空，且评分需在1到5之间！');
  }
};

const cancelComment = () => {
  emit('cancel');
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
}

h3 {
  margin-top: 0;
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

.form-group textarea {
  width: calc(100% - 20px); /* Adjust for padding */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  resize: vertical;
  min-height: 100px;
}

.form-group rating-group {
  margin-bottom: 1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1.5rem;
}

.submit-button, .cancel-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.submit-button {
  background-color: #28a745;
  color: #fff;
}

.submit-button:hover {
  background-color: #218838;
}

.cancel-button {
  background-color: #6c757d;
  color: #fff;
}

.cancel-button:hover {
  background-color: #5a6268;
}
</style>
